<template>
	<view>

		<custom-waterfalls-flow :value="data.list">

			<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}"
				@click="gotofl(item)">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.desc}}</view>
				<view class="price">
					<small>￥</small>
					<span class="pr1">{{item.desc2}}</span>
					<!-- <span class="pr2">￥{{item.price}}</span> -->

				</view>
			</view>

		</custom-waterfalls-flow>
	</view>

</template>

<script>
	import {
		base_Url
	} from '../../utils/Url';
	export default {
		components: {

		},
		props: {
			waterList: {
				type: Array
			}
		},
		data() {
			return {
				data: {
					list: [
						// {
						// 	image: base_Url + '/upload/flimage/bingxiangweixiu.png',
						// 	title: '冰箱清洁',
						// 	desc: '冰箱清洁',
						// 	desc2: 5,
						// 	price: 10
						// },
						// {
						// 	image: base_Url + '/upload/flimage/bingxiangweixiu.png',
						// 	title: '我是标题2',
						// 	desc: '描述描述描述描述描述描述描述描述2',
						// 	desc2: '描述描述描述描述描述描述描述描述1'
						// },
						// {
						// 	image: base_Url + '/upload/flimage/bingxiangweixiu.png',
						// 	title: '我是标题3',
						// 	desc: '描述描述描述描述描述描述描述描述3',
						// 	desc2: '描述描述描述描述描述描述描述描述1'
						// },
						// {
						// 	image: base_Url + '/upload/flimage/bingxiangweixiu.png',
						// 	title: '我是标题4',
						// 	desc: '描述描述描述描述描述描述描述描述4',
						// 	desc2: '描述描述描述描述描述描述描述描述1'
						// },
						// {
						// 	image: base_Url + '/upload/flimage/bingxiangweixiu.png',
						// 	title: '我是标题5',
						// 	desc: '描述描述描述描述描述描述描述描述5',
						// 	desc2: '描述描述描述描述描述描述描述描述1'
						// },
					]
				}

			}
		},
		filters: {
			avatarfilter(e) {
				// console.log('数据', e);
				const originalUrl = JSON.parse(e).url
				const updatedUrl = originalUrl.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
				// console.log("adada", updatedUrl);
				return updatedUrl
				// return e
			}
		},
		onShow() {
			console.log(333, this.data.list);
		},
		created() {
			console.log(11, this.data.list);
			const list = this.waterList.map(item => {
				const image = item.serviceCarousel[0]?.url.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
				return {
					id: item.id,
					image: image,
					title: item.serviceName,
					desc: item.remark,
					desc2: item.price[0],
					price: item.price[1]
				}
			})
			// console.log(list);
			this.data.list = list

		},
		mounted() {
			console.log("儿", this.waterList);
		},
		methods: {
			gotofl(e) {
				console.log("条抓", e);
				this.$toPage("/components/goods/goods", "id", e.id)
			}

		}
	}
</script>

<style lang="less">
	.item {

		padding-left: 8px;
		padding-bottom: 5px;

		.title {
			font-size: 19px;
			font-weight: bold;
		}

		.desc {
			/* 设置容器的宽度 */
			width: 168px;
			/* 文字颜色 */
			color: #939393;
			/* 防止换行 */
			white-space: nowrap;
			/* 超出部分隐藏 */
			overflow: hidden;
			/* 超出部分显示省略号 */
			text-overflow: ellipsis;

		}

		.price {
			display: flex;
			align-items: baseline;
			margin-top: 8px;

			/* 让子元素在同一基线对齐 */
			small {
				font-size: 10px;
				font-weight: bold;
				margin-top: 5px;
				color: #ff5327;
			}

			.pr1 {

				font-size: 18px;
				font-weight: bold;
				margin-bottom: 2px;
				color: #ff5327;
			}

			.pr2 {
				color: #9b9db0;
				font-size: 15px;
				font-weight: bold;
				margin-top: 5px;
				margin-left: 3px;
				text-decoration: line-through;
				/* 在文字底部加横线 */

			}
		}
	}
</style>